WebXR Hit Test Manager: Ray Casting -järjestelmän toteuttaminen immersiivisiin kokemuksiin

Lisätyn todellisuuden (AR) ja virtuaalitodellisuuden (VR) teknologioiden nousu on avannut jännittäviä uusia mahdollisuuksia immersiivisten ja interaktiivisten digitaalisten kokemusten luomiseen. WebXR, JavaScript API VR- ja AR-ominaisuuksien käyttämiseen verkkoselaimissa, mahdollistaa kehittäjien ympäri maailmaa rakentaa näitä kokemuksia useissa eri laitteissa. Keskeinen osa WebXR-kokemusten luomisessa on kyky olla vuorovaikutuksessa virtuaaliympäristön kanssa. Tässä WebXR Hit Test Manager ja ray casting tulevat esiin.

Mikä on Ray Casting ja miksi se on tärkeää?

Ray casting WebXR:n kontekstissa on tekniikka, jota käytetään määrittämään, leikkaako virtuaalinen säde (suora viiva) AR-järjestelmän havaitsemaa todellisen maailman pintaa tai VR-ympäristön virtuaalista objektia. Ajattele sitä kuin laser-osoittimen loistamista ympäristöösi ja näet, mihin se osuu. WebXR Hit Test Manager tarjoaa työkalut näiden säteiden heittämiseen ja tulosten hakemiseen. Nämä tiedot ovat ratkaisevan tärkeitä erilaisille vuorovaikutuksille, mukaan lukien:

• Objektin sijoittaminen: Sallitaan käyttäjien sijoittaa virtuaalisia objekteja todellisen maailman pinnoille, kuten virtuaalisen tuolin asettaminen olohuoneeseensa (AR). Ajattele Tokiossa olevaa käyttäjää, joka sisustaa asuntonsa virtuaalisesti ennen huonekalujen ostamista.
• Kohdistaminen ja valinta: Mahdollistetaan käyttäjien valita virtuaalisia objekteja tai olla vuorovaikutuksessa käyttöliittymäelementtien kanssa virtuaalisen osoittimen tai käden avulla (AR/VR). Kuvittele lontoolainen kirurgi, joka käyttää AR:tä peittääkseen anatomista tietoa potilaan päälle ja valitsee tiettyjä tarkastettavia alueita.
• Navigointi: Käyttäjän avatarin siirtäminen virtuaalimaailman läpi osoittamalla sijaintia ja pyytämällä häntä siirtymään sinne (VR). Pariisilainen museo voisi käyttää VR:ää mahdollistaakseen vierailijoiden navigoinnin historiallisten näyttelyiden läpi.
• Eleiden tunnistus: Yhdistetään osumien testaus käden seurantaan käyttäjien eleiden tulkitsemiseksi, kuten nipistäminen zoomataksesi tai pyyhkäiseminen vierittääksesi (AR/VR). Tätä voitaisiin käyttää yhteistyösuunnittelukokouksessa Sydneyssä, jossa osallistujat käsittelevät virtuaalisia malleja yhdessä.

WebXR Hit Test Managerin ymmärtäminen

WebXR Hit Test Manager on olennainen osa WebXR API:a, joka helpottaa säteiden heittämistä. Se tarjoaa menetelmiä osumatestilähteiden luomiseen ja hallintaan, jotka määrittävät säteen alkuperän ja suunnan. Sitten hallintaohjelma käyttää näitä lähteitä osumatestien suorittamiseen todellista maailmaa (AR:ssä) tai virtuaalimaailmaa (VR:ssä) vastaan ja palauttaa tietoja mahdollisista risteyksistä. Keskeisiä käsitteitä ovat:

• XRFrame: XRFrame edustaa XR-näkymän ajallista tilannekuvaa, mukaan lukien katsojan asento ja havaitut tasot tai ominaisuudet. Osumatestit suoritetaan XRFramea vasten.
• XRHitTestSource: Edustaa heitettävän säteen lähdettä. Se määrittelee alkuperän (mistä säde alkaa) ja suunnan (mihin säde osoittaa). Tyypillisesti luot yhden XRHitTestSource:n tulomenetelmää kohden (esim. ohjain, käsi).
• XRHitTestResult: Sisältää tietoa onnistuneesta osumasta, mukaan lukien leikkauspisteen asennon (sijainnin ja suunnan) ja etäisyyden säteen alkuperästä.
• XRHitTestTrackable: Edustaa seurattua ominaisuutta (kuten tasoa) todellisessa maailmassa.

Perusosumatestijärjestelmän toteuttaminen

Käydään läpi vaiheet perus WebXR-osumatestijärjestelmän toteuttamiseksi JavaScriptin avulla. Tämä esimerkki keskittyy AR-objektin sijoittamiseen, mutta periaatteita voidaan soveltaa muihin vuorovaikutustilanteisiin.

Vaihe 1: WebXR-istunnon ja osumatestien tuen pyytäminen

Ensinnäkin sinun on pyydettävä WebXR-istunto ja varmistettava, että 'hit-test'-ominaisuus on käytössä. Tämä ominaisuus vaaditaan Hit Test Managerin käyttämiseen.

            
async function initXR() {
  try {
    xrSession = await navigator.xr.requestSession('immersive-ar', {
      requiredFeatures: ['hit-test'],
    });

    xrSession.addEventListener('end', () => {
      console.log('XR session ended');
    });

    // Initialize your WebGL renderer and scene here
    initRenderer();

    xrSession.updateRenderState({
      baseLayer: new XRWebGLLayer(xrSession, renderer.getContext())
    });

    xrReferenceSpace = await xrSession.requestReferenceSpace('local');
    xrHitTestSource = await xrSession.requestHitTestSource({
      space: xrReferenceSpace
    });

    xrSession.requestAnimationFrame(renderLoop);

  } catch (e) {
    console.error('WebXR failed to initialize', e);
  }
}

            

              
                Copy
              
            
          

Selitys:

• `navigator.xr.requestSession('immersive-ar', ...)`: Pyytää immersiivisen AR-istunnon. Ensimmäinen argumentti määrittää istunnon tyypin ('immersive-ar' AR:lle, 'immersive-vr' VR:lle).
• `requiredFeatures: ['hit-test']`: Pyytää ratkaisevasti 'hit-test'-ominaisuutta, mikä mahdollistaa Hit Test Managerin.
• `xrSession.requestHitTestSource(...)`: Luo XRHitTestSource:n, määrittäen säteen alkuperän ja suunnan. Tässä perusesimerkissä käytämme 'viewer'-viiteavaruutta, joka vastaa käyttäjän näkökulmaa.

Vaihe 2: Renderöintisilmukan luominen

Renderöintisilmukka on WebXR-sovelluksesi sydän. Siellä päivität näkymän ja renderöit jokaisen kehyksen. Renderöintisilmukan sisällä suoritat osumatestin ja päivität virtuaalisen objektisi sijainnin.

            
function renderLoop(time, frame) {
  xrSession.requestAnimationFrame(renderLoop);

  const xrFrame = frame;
  const xrPose = xrFrame.getViewerPose(xrReferenceSpace);

  if (xrPose) {
    const hitTestResults = xrFrame.getHitTestResults(xrHitTestSource);

    if (hitTestResults.length > 0) {
      const hit = hitTestResults[0];
      const hitPose = hit.getPose(xrReferenceSpace);

      // Update the position and orientation of your virtual object
      object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
      object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
      object3D.visible = true; // Make the object visible when a hit is found
    } else {
      object3D.visible = false; // Hide the object if no hit is found
    }
  }

  renderer.render(scene, camera);
}

            

              
                Copy
              
            
          

Selitys:

• `xrFrame.getHitTestResults(xrHitTestSource)`: Suorittaa osumatestin aiemmin luodun XRHitTestSource:n avulla. Se palauttaa XRHitTestResult-objektien taulukon, joka edustaa kaikkia löydettyjä risteyksiä.
• `hitTestResults[0]`: Otamme ensimmäisen osumatuloksen. Monimutkaisemmissa tilanteissa saatat haluta iteroida kaikkien tulosten läpi ja valita sopivimman.
• `hit.getPose(xrReferenceSpace)`: Hakee osuman asennon (sijainnin ja suunnan) määritetyssä viiteavaruudessa.
• `object3D.position.set(...)` ja `object3D.quaternion.set(...)`: Päivitä virtuaalisen objektisi (object3D) sijainti ja suunta vastaamaan osuma-asentoa. Tämä sijoittaa objektin leikkauspisteeseen.
• `object3D.visible = true/false`: Ohjaa virtuaalisen objektin näkyvyyttä, jolloin se ilmestyy vain, kun osuma löytyy.

Vaihe 3: 3D-näkymän määrittäminen (esimerkki Three.js:n avulla)

Tämä esimerkki käyttää Three.js:ää, suosittua JavaScript 3D -kirjastoa, yksinkertaisen kohtauksen luomiseen kuution kanssa. Voit mukauttaa tätä käyttämään muita kirjastoja, kuten Babylon.js tai A-Frame.

            
let scene, camera, renderer, object3D;
let xrSession, xrReferenceSpace, xrHitTestSource;

function initRenderer() {
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
  renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.xr.enabled = true; // Enable WebXR
  document.body.appendChild(renderer.domElement);

  const geometry = new THREE.BoxGeometry(0.1, 0.1, 0.1); // 10cm cube
  const material = new THREE.MeshNormalMaterial();
  object3D = new THREE.Mesh(geometry, material);
  object3D.visible = false; // Initially hide the object
  scene.add(object3D);

  renderer.setAnimationLoop(() => { /* No animation loop here. WebXR controls it.*/ });
  renderer.xr.setSession(xrSession);

  camera.position.z = 2; // Move the camera back
}

// Call initXR() to start the WebXR experience
initXR();

            

              
                Copy
              
            
          

Tärkeää: Muista sisällyttää Three.js -kirjasto HTML-tiedostoosi:

            


            

              
                Copy
              
            
          

Edistyneet tekniikat ja optimoinnit

Yllä oleva perustoteutus tarjoaa perustan WebXR-osumien testaukselle. Tässä on joitain edistyneitä tekniikoita ja optimointeja, joita kannattaa harkita, kun rakennat monimutkaisempia kokemuksia:

1. Osumatestitulosten suodattaminen

Joissakin tapauksissa saatat haluta suodattaa osumatestituloksia, jotta otetaan huomioon vain tietyntyyppiset pinnat. Haluat ehkä esimerkiksi sallia objektien sijoittamisen vain vaakasuorille pinnoille (lattiat tai pöydät). Voit saavuttaa tämän tutkimalla osuma-asennon normaalia vektoria ja vertaamalla sitä ylöspäin olevaan vektoriin.

            
if (hitTestResults.length > 0) {
  const hit = hitTestResults[0];
  const hitPose = hit.getPose(xrReferenceSpace);

  // Check if the surface is approximately horizontal
  const upVector = new THREE.Vector3(0, 1, 0); // World up vector
  const hitNormal = new THREE.Vector3();
  hitNormal.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z);
  hitNormal.applyQuaternion(camera.quaternion); // Rotate the normal to world space

  const dotProduct = upVector.dot(hitNormal);

  if (dotProduct > 0.9) { // Adjust the threshold (0.9) as needed
    // Surface is approximately horizontal
    object3D.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
    object3D.quaternion.set(hitPose.transform.orientation.x, hitPose.transform.orientation.y, hitPose.transform.orientation.z, hitPose.transform.orientation.w);
    object3D.visible = true;
  } else {
    object3D.visible = false;
  }
}

            

              
                Copy
              
            
          

2. Ohimenevien syöttölähteiden käyttäminen

Kehittyneempiin syöttötapoihin, kuten käden seurantaan, käytät yleensä ohimeneviä syöttölähteitä. Ohimenevät syöttölähteet edustavat väliaikaisia syöttötapahtumia, kuten sormen napautusta tai käden elettä. WebXR Input API mahdollistaa pääsyn näihin tapahtumiin ja osumatestilähteiden luomisen käyttäjän käden sijainnin perusteella.

            
xrSession.addEventListener('selectstart', (event) => {
  const inputSource = event.inputSource;
  const targetRayPose = event.frame.getPose(inputSource.targetRaySpace, xrReferenceSpace);

  if (targetRayPose) {
    // Create a hit test source from the target ray pose
    xrSession.requestHitTestSourceForTransientInput({ targetRaySpace: inputSource.targetRaySpace, profile: inputSource.profiles }).then((hitTestSource) => {
       const hitTestResults = event.frame.getHitTestResults(hitTestSource);
       if (hitTestResults.length > 0) {
         const hit = hitTestResults[0];
         const hitPose = hit.getPose(xrReferenceSpace);

         // Place an object at the hit location
         const newObject = new THREE.Mesh(new THREE.SphereGeometry(0.05, 32, 32), new THREE.MeshNormalMaterial());
         newObject.position.set(hitPose.transform.position.x, hitPose.transform.position.y, hitPose.transform.position.z);
         scene.add(newObject);
       }
       hitTestSource.cancel(); // Cleanup the hit test source
    });
  }
});

            

              
                Copy
              
            
          

3. Suorituskyvyn optimointi

WebXR-kokemukset voivat olla laskennallisesti raskaita, erityisesti mobiililaitteilla. Tässä on joitain vinkkejä suorituskyvyn optimointiin:

• Osumatestien tiheyden vähentäminen: Osumatestien suorittaminen jokaisessa kehyksessä voi olla kallista. Harkitse tiheyden vähentämistä, varsinkin jos käyttäjän liike on hidasta. Voit käyttää ajastinta tai suorittaa osumatestejä vain, kun käyttäjä aloittaa toiminnon.
• Bounding Volume Hierarchy (BVH):n käyttö: Jos sinulla on monimutkainen näkymä, jossa on paljon objekteja, BVH:n käyttö voi nopeuttaa törmäysten tunnistamista merkittävästi. Three.js ja Babylon.js tarjoavat BVH-toteutuksia.
• LOD (Level of Detail): Käytä 3D-malleillesi eri tarkkuustasoja riippuen niiden etäisyydestä kameraan. Tämä vähentää sellaisten monikulmioiden määrää, jotka on renderöitävä kaukaisille objekteille.
• Occlusion Culling: Älä renderöi objekteja, jotka ovat piilossa muiden objektien takana. Tämä voi parantaa suorituskykyä merkittävästi monimutkaisissa kohtauksissa.

4. Eri viiteavaruuksien käsittely

WebXR tukee eri viiteavaruuksia, jotka määrittävät koordinaattijärjestelmän, jota käytetään käyttäjän sijainnin ja suunnan seuraamiseen. Yleisimmät viiteavaruudet ovat:

• Local: Koordinaattijärjestelmän alkuperä on kiinteä suhteessa käyttäjän aloituspaikkaan. Tämä sopii kokemuksiin, joissa käyttäjä pysyy pienellä alueella.
• Bounded-floor: Alkuperä on lattiatasolla, ja XZ-taso edustaa lattiaa. Tämä sopii kokemuksiin, joissa käyttäjä voi liikkua huoneessa.
• Unbounded: Alkuperä ei ole kiinteä, ja käyttäjä voi liikkua vapaasti. Tämä sopii suuren mittakaavan AR-kokemuksiin.

Sopivan viiteavaruuden valitseminen on tärkeää, jotta WebXR-kokemuksesi toimii oikein eri ympäristöissä. Voit pyytää tiettyä viiteavaruutta, kun luot XR-istunnon.

            
xrReferenceSpace = await xrSession.requestReferenceSpace('bounded-floor');

            

              
                Copy
              
            
          

5. Laitteiden yhteensopivuuden käsittely

WebXR on suhteellisen uusi tekniikka, eikä kaikki selaimet ja laitteet tue sitä yhtä hyvin. On tärkeää tarkistaa WebXR-tuki, ennen kuin yrität alustaa WebXR-istuntoa.

            
if (navigator.xr) {
  // WebXR is supported
  initXR();
} else {
  // WebXR is not supported
  console.error('WebXR is not supported in this browser.');
}

            

              
                Copy
              
            
          

Sinun tulisi myös testata WebXR-kokemustasi useilla eri laitteilla varmistaaksesi, että se toimii oikein.

Kansainvälistymisnäkökohdat

Kun kehität WebXR-sovelluksia globaalille yleisölle, on tärkeää ottaa huomioon kansainvälistyminen (i18n) ja lokalisointi (l10n).

• Teksti ja käyttöliittymäelementit: Käytä lokalisointikirjastoa tekstin ja käyttöliittymäelementtien kääntämiseen eri kielille. Varmista, että käyttöliittymäsi asetteluun mahtuu eri tekstien pituuksia. Esimerkiksi saksalaiset sanat ovat yleensä pidempiä kuin englanninkieliset sanat.
• Mittayksiköt: Käytä eri alueille sopivia mittayksiköitä. Käytä esimerkiksi metrejä ja kilometrejä useimmissa maissa, mutta jalkoja ja maileja Yhdysvalloissa ja Isossa-Britanniassa. Anna käyttäjien valita haluamansa mittayksiköt.
• Päivämäärä- ja aikamuodot: Käytä eri alueille sopivia päivämäärä- ja aikamuotoja. Käytä esimerkiksi YYYY-MM-DD-muotoa joissakin maissa ja MM/DD/YYYY-muotoa toisissa.
• Valuutat: Näytä valuutat eri alueille sopivassa muodossa. Käytä kirjastoa valuuttamuunnosten käsittelyyn.
• Kulttuurinen herkkyys: Ole tietoinen kulttuurieroista ja vältä käyttämästä kuvia, symboleja tai kieltä, joka voi olla loukkaavaa joillekin kulttuureille. Esimerkiksi tietyillä käden eleillä voi olla eri merkityksiä eri kulttuureissa.

WebXR-kehitystyökalut ja -resurssit

Useat työkalut ja resurssit voivat auttaa sinua WebXR-kehityksessä:

• Three.js: Suosittu JavaScript 3D -kirjasto WebGL-pohjaisten kokemusten luomiseen.
• Babylon.js: Toinen tehokas JavaScript 3D -moottori, joka keskittyy WebXR-tukeen.
• A-Frame: Web-kehys VR-kokemusten rakentamiseen HTML:n avulla.
• WebXR-emulaattori: Selaimen laajennus, jonka avulla voit testata WebXR-kokemuksia ilman fyysistä VR- tai AR-laitetta.
• WebXR Device API -määrittely: W3C:n virallinen WebXR-määrittely.
• Mozilla Mixed Reality -blogi: Loistava resurssi WebXR:stä ja siihen liittyvistä tekniikoista oppimiseen.

Johtopäätös

WebXR Hit Test Manager on tehokas työkalu interaktiivisten ja immersiivisten AR/VR-kokemusten luomiseen. Ymmärtämällä säteiden heittämisen ja Hit Test API:n käsitteet voit rakentaa houkuttelevia sovelluksia, joiden avulla käyttäjät voivat olla vuorovaikutuksessa virtuaalimaailman kanssa luonnollisella ja intuitiivisella tavalla. WebXR-tekniikan kehittyessä innovatiivisten ja mukaansatempaavien kokemusten luomisen mahdollisuudet ovat rajattomat. Muista optimoida koodisi suorituskyvyn parantamiseksi ja harkita kansainvälistymistä, kun kehität globaalille yleisölle. Ota vastaan seuraavan sukupolven immersiivisten verkkokokemusten rakentamisen haasteet ja palkinnot.